import React, {Fragment } from 'react'
import {UserOutlined,LogoutOutlined} from '@ant-design/icons'
import { Modal} from 'antd';
import './index.css'
import { useNavigate } from 'react-router-dom'
import{OutAll,GetUserName} from '../../common/auth.js'
import { createFromIconfontCN } from '@ant-design/icons';

const MyIcon = createFromIconfontCN({
  scriptUrl: '//at.alicdn.com/t/font_3310774_hfdr4hciktl.js', // 在 iconfont.cn 上生成
});
export default function Top(){
  let register = useNavigate()
  function outLogin(){
    Modal.confirm({
      title: '提示',
      content: '你确定要退出吗？',
      okText: '确认',
      cancelText: '取消',
      onOk:()=>{
        OutAll()
        register('/')   
      }
    });
  }
  return (
    <Fragment>
      <div className='logoWrap'>
          <h1 style={{color:'#fff',fontSize:'20px',height:'20px',margin:'0',padding:'0'}}>
            <MyIcon style={{marginRight:'15px',color:'red'}} type="icon-houtaiguanli"/>
            南客餐饮后台管理系统
          </h1>
      </div>
      <div className='userWarp'>
        <div className='btn-group'>
          <UserOutlined />
          {GetUserName()}
        </div>
        <div className='btn-group' onClick={outLogin}>
          <LogoutOutlined />
          &nbsp;&nbsp;登入
        </div>
      </div>
    </Fragment>
  )
}
